<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

    <script type="text/javascript" src="js/rem.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <title>智慧社区数据比对信息系统</title>
</head>

<body>
	<!-- 概况，数字使用动画data-animate="close"可关闭动画，data-duration可定义动画时长（毫秒）-->
    <div class="container-flex loadItem" data-url="data/countNum.json" data-type="count">
        <div class="box-left">
            <div class="left-top">
                <div class="current-num">
                    <div>当前比对数据</div>
                    <p class="_count0"></p>
                </div>
            </div>
            <div class="left-center">
                <div class="title-box">
                    <h6>违法犯罪人员分析</h6>
                </div>
                <div class="chart-box pie-chart" style="">
                	<!-- 饼状图，data-style="percent" 显示百分比-->
                    <div id="pie_fanzui-" class="loadItem" data-url="data/weifarenyuan.json" data-type="pie" data-style="percent" style="width:100%;"
                    	data-legend-style="LT,vertical,#fff" data-series='[{"radius" :"65%","center":["50%", "60%"]}]'></div>
                </div>
            </div>
            <div class="left-bottom" class="select">
                <div class="title-box">
                    <h6>人口出入记录</h6>
                </div>
                <!-- 列表，data-style="percent" 显示百分比-->
                <div class="chart-box loadItem" data-url="data/renkouchuru.json" data-type="list">
                </div>
            </div>
        </div>
        <div class="box-center">
            <div class="center-top">
                <h1><img src="images/jinghui.png" style="width:55px;margin-right:20px;"/>智慧社区内网比对平台</h1>
            </div>
            <div class="center-center">
                <div class="weather-box">
                	<!-- 时间 -->
                    <div class="data">
                        <p class="time" id="time">00:00:00</p>
                        <p id="date"></p>
                    </div>
                   <!--  天气 -->
                    <div class="weather">
                        <img id="weatherImg" src="images/weather/weather_img01.png" alt="">
                        <div id="weather">
                            <p class="active dev_weather">多云</p>
                            <p class="dev_temp">16-22℃</p>
                            <p class="dev_area">潍坊市奎文区</p>
                        </div>
                    </div>
                </div>
                <img src="images/line_bg.png" alt="">
                <div class="select-box" style="height: 0.3rem;">
                    
                    <div data-type="2">
                        <div class="select" tabindex="0" hidefocus="true" >
                           <p style="color:#FFFF00;font-weight:bold;">NO.1<span class="_count4">北京</span>：<span class="_count1"></span>人</p>
                           <p style="color:#7FFF00;font-weight:bold;">NO.2<span class="_count5">天津</span>：<span class="_count2"></span>人</p>
                           <p style="color:#7FFFD4;font-weight:bold;">NO.3<span class="_count6">河北</span>： <span class="_count3"></span>人</p>
                        </div>
                        
                    </div>
                </div>
            </div>
            <div class="center-bottom">
                <div class="chart-box">
                	<!-- 自定义图，data-pointer="circle,max:10,min:3,rgba(255,255,0,0.8)" 控制显示点 data-topdata="5,rgba(255,255,0,0.8)" 显示前几  -->
                	<!-- data-tooltip-suffix="人" 控制tooltip后缀 data-tooltip-show="value,count2,count4"显示字段 -->
            		<div class="cen-top loadItem" id="map" data-url="data/mapdata.json" data-type="extend" data-extendfn="chinaMap" data-tooltip-suffix="人" data-tooltip-show="value,count2,count4"
            			data-visual-style="color:#ff0>#ffff00>#0E94EB,orient:vertical,max:{max}/2,hide"
            			data-geo-style="area:#031525;#2B91B7 border:#555" 
            			style="width:100%;height:95%;"></div>
                </div>
                
            </div>

        </div>
        <div class="box-right">
            <div class="right-top">
                <div class="title-box">
                    <h6 id="barTitle">违法犯罪人员年龄分布</h6>
                </div>
                <p class="unit">单位：岁</p>
                <div class="chart-box">
                	 <!-- 饼状图，data-style="percent" 显示百分比 data-ring环图-->
                    <div class="loadItem" data-url="data/nianling.json" data-type="pie" data-style="percent " data-ring='["50%", "80%"]' data-label="center" 
                    	data-legend-style="LT,vertical,#fff" style="width:100%;height:100%;"></div>
                </div>
                
            </div>
            <div class="right-center">
            	
                <div class="title-box">
                    <h6>违法犯罪人员地区分布</h6>
                </div>
                <div class="chart-box pie-chart">
                    <!-- 柱状图，data-grid设置位置，shieldSettings扩展参数设置 -->
                    	<!-- shieldSettings="{color: ['#FADB71']}" -->
                    <div class="loadItem" data-url="data/diqu.json" data-type="bar" data-axis-color="#FADB71" data-grid='{"top":"10%"}'
                    	data-color="#FADB71" style="width:90%;min-height:120px;margin-left:10px;"></div>
                </div>
            </div>
            
            
            <div class="right-bottom">
                <div class="title-box">
                	<p id="switchBtn"><span class="active" data-dataType="income">人口出入时间段统计</span></p>
                </div>
                <!-- 折线图 ,data-style="smooth"平滑模式-->
                	<!-- shieldSettings="{color: ['#7FFF00']}" --> 
                <div class="loadItem" data-url="data/churushijian.json" data-type="line" data-style="smooth" data-axis-color="#7FFF00"
                	data-color="#7FFF00" style="width:90%;min-height:160px;margin-left:10px;" data-theme="macarons" data-grid='{"top":"10%"}'></div>
                
            </div>
        </div>
    </div>
	<script type="text/javascript" src="../../js/jquery-2.2.1.min.js"></script>
	<script type="text/javascript" src="../../js/echarts.min.js"></script>
	<script type="text/javascript" src="../../js/point_util.js"></script>
	<!-- 依赖原数据插件 -->
	<script type="text/javascript" src="../../../webjars/shieldjs/depends/jquery.metadata.js"></script>
	<script type="text/javascript" src="../../../webjars/shieldjs/core/shield.util.js"></script>
	<!-- 处理 -->
	<script type="text/javascript" src="../../js/charts.deal.pie.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.bar.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.line.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.map.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.list.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.count.js"></script>
	<script type="text/javascript" src="../../js/charts.base.js"></script>
    <script type="text/javascript">
    ShieldCharts.theme = "infographic";
    timer();
    </script>
    <script type="text/javascript" src="../../js/theme/infographic.js"></script>
    <script type="text/javascript" src="../../js/theme/macarons.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.extend.js"></script>
	<script type="text/javascript" src="../../js/charts.tool.js"></script>
    
	<script type="text/javascript" src="../../js/china.js"></script>
	<script type="text/javascript">
		//地区编码https://github.com/seeways/PythonDemo/blob/master/other_tools/weather_city.json
		var url = "http://t.weather.sojson.com/api/weather/city/101120601"; 
		// 需要后台操作，直接调取存在跨域问题
		$.getJSON(url, {t:new Date().getTime()}, function(result){
			var container = $("#weather");
			alert(JSON.stringify(result)); 
			alert(result.status)
			if(data.status == 200){ //正常
				alert(container.length);
				container.find(".dev_weather").text(result.data.forecast[0].type);
				container.find(".dev_temp").text(result.data.forecast[0].low+"-"+data.data.forecast[0].high);
				container.find(".dev_area").text(result.cityInfo.parent+""+data.cityInfo.city);
			}
		});
	</script>
	
</body>



</html>